Welcome to HTML Tags

$Math Department$

[What are Tags?] [Text Tags] [Basic Tags] [Link Tags]
[Image Tags] [Form Tags] [Frame Tags] [Table Tags]

What are Tags

Tags are what make up HTML. Without them, HTML wouldn't even exist! They are not only used in HTML, but also in many others, such as Javascript and CGI. They are normally placed within these 2 brackets : < > . Tags have default settings but they can be changed by attributes. Attributes can add lots of features to tags and give some nice effects. But they are only OPTIONAL.

Text Tags

<p>

This creates a new paragraph with a blank line inbetween them.

align="" : This decides if the paragraph will be to the left, right or center.

<br>

This starts a new line directly underneath the other.

<hr>

This creates a divider line.

noshade : This makes the line shaded.
size="pixel" : This defines how thick/the height of the line.
width="pixel" : This defines how wide the line will be.

<b> </b>

Makes the text/links bold.

<i> </i>

Makes the text/links italic.

<u> </u>

Makes the text underlined.

<big> </big>

Makes the text bigger.

<small> </small>

Makes the text smaller.

<em> </em>

Either makes the text bold or underlined. Em

<cite> </cite>

Usually makes the text italic.

<strong> </strong>

Usually makes the text bold.

<sub> </sub>

Gives the _subscript.

H₂O

<sup> </sup>

Gives the ^superscript.

25^th of December

<s> </s>

~~Strikes~~ through the text.

<strike> </strike>

~~Strikes~~ through the text also.

<blockquote> </blockquote>

This indents the paragraph as well as placing a blank line above and below it.

Line 1

Line 2

Line 3

<dd> </dd>

Indents the line/paragraph.

Indented

<center> </center>

Centers the text/images.

Centered

<h#> </h#>

Increases the siz of the text. Replace # with a number of 1 through 6, 1 being the largest.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

<tt> </tt>

Makes the text look like it was done by a typewriter.

True Type

<pre> </pre>

It retains all the spaces and lines as well as looking like it was done with a typewriter.

Hello
                  How           are
         you
     ?

<font> </font>

Lets you modify the colour and size among other things with the text. Note that these changes DO NOT affect how it is printed (colour and size).

color="HEX Colour" : Defines the colour of the text using a HEX Code.
size="?" : Defines the size of the text. -2 is the smallest and 4 is the largest.

White Text
-2 Size
-1 Size
+0 Size
+1 Size
+2 Size
+3 Size
+4 Size

Basic Tags

<html> </html>

This tells the browser that what follows is HTML.

<head> </head>

This is used for placing certain Javascripts, <meta> tags, and the <base href="your URL">. Without those tags, the <head> has no purpose, but just to be safe, put it there any way.

<title> </title>

Do you see the text: "Welcome to Mrs. O's Homepage - HTML Guide - Tags" in the title bar? Thats where the text inbetween the <title> tags goes.

<body> </body>

This tag can make a HUGE impact on how your page looks. Out of all the necessary tags, this is the only one which has attributes.

bgcolor="#color" : This defines the background colour of the page. You can use the the color code in place of color or use the color name in place of #color. You can chose a color from the COLOURS section.
background="image and location" : This enables you to use an image instead of a color. It automatically tiles the image across the screen.
text="#color" : This defines the colour of the text. Replace the "color" value with a HEX Code from the COLOURS section.
link="#color" : This defines the colour of the unvisited/unclicked links. Replace the "color" value with a HEX Code from the COLOURS section.
vlink="#color" : This defines the colour of the visited/clicked links. Replace the "color" value with a HEX Code from the COLOURS section.
alink="#color" : This defines the colour of the link when it is being clicked. Replace the "color" value with a HEX Code from the COLOURS section.

Link Tags

<a> </a>

This tag is what makes all links. There are many more attributes than I listed but you probably won't use the others.

href="where it goes" : This defines where the link goes. If it is a URL, replace "where it goes" with it. If it is a email link, replace "where it goes" with "mailto:youremail@provider.com".
target="_new , _blank , _top , frame_name" : This tells where the link will go. If you used _new or _blank it will open in a new window. If you used _top it will break out of frames. If you used frame_name it will open in the frame called whatever you replace "frame_name" with.
name="whatever" : For naming a title as an address so you can bring people to that point without scrolling.

<base>

This one anchors all links to another so you do not have to write it all every time. Place it in the <head> and </head> tags.

href="whatever" : This defines the link that all links will start with. (You can overide it if you place the FULL URL in; i.e. to another site) Replace "whatever" with your URL.

Image Tags

<img>

This tag defines images and animations. It has many attributes, but some are basically useless.

src="location" : This attribute defines what image will show up. Replace "location" with where your image is.
border="pixels" : This defines how thick of a border there will be. Replace "pixels" with a number (0 = no border; useful with links, 1 = thin border, 2 = normal border for links, 3 or higher = thick border)
align="left , right , center" : This defines if the image is going to be on the left, right, or center of the page.
alt="text" : This says that if the image does not show, this text will appear in a box. Also when the mouse hovers the the image or broken image, it will come a text box.
width="pixels" : How wide the image will be. Streches the image.
height="pixels" : How high the image will be. Streches the image.

Form Tags

<form> </form>

This is the basis for all forms.

method="post or link" : This tells where the form is going to go. With the "post" it sends an email to the address in the action attribute. The "link" opens the link in the action attributes.
action="URL or Email address" : This defines where the form goes. If the method is "post", use an email. If the method is "link", use a URL.

<textarea> <textarea>

This is a large box in which you can put as many words in as you like. It is placed in the <form> tag.

name="name of text box" : This gives the text box a name, which appears in the email.
rows="# of rows" : This defines the number of rows seen. It can extend beyond that value.
cols="# of columns" : This defines the number of columns. It can extend beyond that value.

<select> </select>

This is the basis for the drop-down / pop-up menu. It is placed in the <form> tag.

name="name for menu" : This gives the pop-up box a name, which appears in the email.
size="options seen" : This defines how many of the options are seen at once. Best to set at one.

<option>

This is each option to chose in the pop-up box. This is placed in the <select> tag.

selected : If placed in the tag it is the one that is visible at the beginning.

<input>

This is the basis for most of the form types, including buttons, text bars, checkboxes and radio buttons. This is placed in the <form> tag.

type=" " : The type is what defines what the tag does. It can be, radio for a radio button, checkbox for a checkbox, text for a text bar, reset for reseting the form, and submit to send the form to the link or email address.
name="varies" : The name is what is shown on the email to help organize it. Radio buttons MUST have the SAME name for each set.
value="varies" : The value what is shown on the email depending on what they selected, what starts in the text bar, or the name of buttons.
size="pixels" : The size is what defines the length of text bars.

Frame Tags

Table Tags

<table> </table>

This tag is the main one. It starts and ends the table and can define much of what it will look like.

align="left, right, or center" : This tells the browser that the WHOLE table will be on the right, letf, or center of the page.
bgcolor="#HEX Colour" : This defines the background colour of the table; We'll get into this later
border="pixels" : Defines the border; we'll get into this later.
cellpadding="pixels" : Defines the number of pixels inbetween the contents of the cell and the edge.
cellspacing="pixels" : Defines the number of pixels inbetween the cells and outer edges of the table.
valign="top, middle, or bottom" : Defines the vertical alignment of the table's contents.
height="pixels" : This defines the height of the table in pixels.
width="pixels" : This defines the width of the table in pixels.

<caption> </caption>

This one gives a title for the table centered in the middle of the table just above where it starts.

align="left, right, center" : This defines if the caption will be placed in the center of the table, just above it (default), if it will be to the left side of the table, or if it will be to the right side of the table.

<tr> </tr>

This tag is the one which starts new rows.

align="center, left, right" : Defines whether the alignment of the data in this row is to the left, right or center.
bgcolor="#HEX Colour" : Defines the background colour of this row.
valign="top, middle, bottom" : This defines if the data in the row will be at the bottom, top or middle of the cell.

<th> </th>

This tag is almost the same as the <td> tag. But this one, makes it a header cell, which normally has a bold font for the text.

align="center, left, right" : Defines whether the alignment of the data in this row is to the left, right or center.
bgcolor="#HEX Colour" : Defines the background colour of this row.
valign="top, middle, bottom" : This defines if the data in the row will be at the bottom, top or middle of the cell.

<<td> </td>

This tag is the one who defines the columns in each row.

align="center, left, right" : Defines whether the alignment of the data in this row is to the left, right or center.
bgcolor="#HEX Colour" : Defines the background colour of this row.
valign="top, middle, bottom" : This defines if the data in the row will be at the bottom, top or middle of the cell.

[What are Tags?] [Text Tags] [Basic Tags] [Link Tags]
[Image Tags] [Form Tags] [Frame Tags] [Table Tags]